import Taro from '@tarojs/taro'
import { BaseComponent } from '@common/components/base-component'
import { CoverView, Text, View, Image } from '@tarojs/components'
import AppRoute from '@utils/route/index'
import Jump from '@utils/jump'
import IQRequest from '@common/iq-request/request'
import { getUserInfoId, getAppData, setGlobalData } from '@utils/tools'
import AlertTool from '@components/alert-tool'
import './index.scss'
import IconHome from '../assets/img/home.png'
import IconHomeA from '../assets/img/home-active.png'
import IconUser from '../assets/img/user.png'
import IconUserA from '../assets/img/user-active.png'
import IconTask from '../assets/img/task.png'
import IconTaskA from '../assets/img/task-active.png'
import IconMall from '../assets/img/mall.png'
import IconMallA from '../assets/img/mall-active.png'
export interface StatusBarProps {
    selected: any;
    color: string;
    selectedColor: string;
    backgroundColor: string;
    list: any;
}

export interface NavigationBarProps {

}
export default class customTabBar extends BaseComponent<NavigationBarProps, StatusBarProps> {
    constructor(props) {
        super(props)
        this.state = {
            selected: null,
            color: '#B1B4C3',
            selectedColor: '#415FFF',
            backgroundColor: "#fff",
            list: [{
                pagePath: "/pages/index/index",
                iconPath: IconHome,
                selectedIconPath: IconHomeA,
                text: "首页"
            },
            {
                pagePath: "/pages/task/index",
                iconPath: IconTask,
                selectedIconPath: IconTaskA,
                text: "任务中心"
            }, {
                pagePath: "/pages/mall/index",
                iconPath: IconMall,
                selectedIconPath: IconMallA,
                text: "礼品商城"
            },
            {
                pagePath: "/pages/user/index",
                iconPath: IconUser,
                selectedIconPath: IconUserA,
                text: "个人中心"
            },
            ],
        }
    }
    /**
 * 获取个人信息接口
 * */
    render() {
        let { selected, selectedColor, color } = this.state
        return (
            <>
                <View className='custom-tab'>
                    {
                        this.state.list.map((item, index) => {
                            return <>
                                <View className='custom-tab-item' onClick={this.switchTab.bind(this, index)} data-path={item.pagePath} key={index}>
                                    <Image className='custom-tab-item-img' src={(selected == null ? 0 : selected) === index ? item.selectedIconPath : item.iconPath} />
                                    <View className='custom-tab-item-text' style={{ color: (selected == null ? 0 : selected) === index ? selectedColor : color }}>
                                        {item.text}
                                    </View>
                                </View>
                            </>
                        })
                    }

                </View>
            </>

        )
    }
    switchTab = (index) => {
        let that = this
        setTimeout(() => {
            that.setState({
                selected: getAppData().tabIndex,
            })
        }, 0);
        const url = this.state.list[index].pagePath
        Taro.switchTab({
            url: url
        })
    }
}